import React from 'react'
import Timeline from '@/components/timeline'
import { Button, message, Popconfirm } from 'antd'
import ExportExcel from '@/components/exportExcel'
import { get2DArray } from '@/utils'
import { fileList } from './datas'
import styles from './styles.module.less'

class BaseCard extends React.Component {
  state = {
    data: [],
    loading: false,
    showLeft: 'none',
    text: ''
  }

  componentDidMount() {
    this.getData()
  }

  getData = () => {
    this.setState({
      loading: true,
      showLeft: 'none'
    })
    const mailData = fileList
    // mailData.map((item) => {
    //   item.attachmentDto = {
    //     'updateDate': item.receiveDate
    //   }
    //   return item
    // })
    const fnc = (item) => (e) =>
      e[0].attachmentDto.updateDate.slice(0, 10) === item.attachmentDto.updateDate.slice(0, 10)
    const arrList = [...mailData]
    const arr = arrList.sort(
      (a, b) =>
        new Date(b.attachmentDto.updateDate).getTime() -
        new Date(a.attachmentDto.updateDate).getTime()
    )
    const newArr = get2DArray(arr, fnc)
    this.setState(
      {
        data: newArr,
        showLeft: 'inline-flex',
        text: '完成内部研报。。。。。',
        loading: false
      },
      this.setTime
    )
  }

  setTime = () => {
    setTimeout(() => {
      this.setState({
        showLeft: 'none',
        text: ''
      })
    }, 2000)
  }

  renderNode = (item) => {
    let dom = null
    dom = (
      <ul className={styles.list}>
        <li className={styles.header}>
          <b>{item.fileName}</b>
        </li>
        <div className={styles.listContent}>
          <li>
            <span>上传人</span>
            <span>{item.attachmentDto.userName}</span>
          </li>
          <li>
            <span>文件大小</span>
            <span>{item.attachmentDto.fileSize}</span>
          </li>
          <li>
            <span>上传日期</span>
            <span>{item.attachmentDto.updateDate}</span>
          </li>
          <li>
            <span>文件标题</span>
            <span title={item.title} className={styles.fileTitle}>
              {item.title}
            </span>
          </li>
          <li>
            <span>文件描述</span>
            <span className={styles.speak} title={item.describe}>
              {item.describe}
            </span>
          </li>
        </div>
        <div className={styles.des}>
          <span style={{ color: '#A8aaf' }}>{item.attachmentDto.reportType}</span>
          <div className={styles.btns}>
            {item.delete && (
              <Popconfirm
                title="确定删除？"
                okText="确定"
                cancelText="取消"
                onConfirm={() => this.delete(item.attachmentDto.id)}>
                <Button danger style={{ marginRight: 18 }}>
                  删除
                </Button>
              </Popconfirm>
            )}
            <ExportExcel url="xxxx.com" linkParams={{ id: item.attachmentDto.id }}></ExportExcel>
          </div>
        </div>
      </ul>
    )
    return dom
  }

  renderTitle = (arry) => arry[0].attachmentDto.updateDate.slice(0, 10)

  render() {
    const { data, loading, showLeft, text } = this.state
    return (
      <div className={styles.ReportFile}>
        {loading ? (
          <loading fixedHight="true" size="lg" />
        ) : (
          <Timeline
            data={data}
            text={text}
            showLeft={showLeft}
            height="auto"
            className="reportTimeline"
            renderNode={this.renderNode}
            renderTitle={this.renderTitle}
          />
        )}
      </div>
    )
  }
}
export default BaseCard
